<template>
    <view class="Positon" v-if="info">
        <view class="move" v-if="showMove">
            <view class="txt"> 拆迁至：</view>
            <view class="movebg"></view>
        </view>
        <view class="name-box">
            <view class="name">
                <view> {{ info.name || '' }}</view>
                <!-- <image class="img-right" src="/static/title_back.png"></image>     -->
            </view>
            <view @tap="toDeatil" class="btn" :style="{ background: typeMap[type].color }">{{ typeMap[type].label }}</view>
        </view>

        <view class="flex-box">
            <view class="label">
                检查时间：<text class="b">{{ info.updated_at || '' }}</text>
            </view>
            <!-- <view class="m3">
                容积：{{ info.machine}}
            </view> -->
        </view>
        <view class="label">
            地点：<text class="b">{{ info.address || '' }}</text>
        </view>


        <view class="bg" v-if="showAddress && getDistance(latitude, longitude, info.lat, info.lon)">
            距离：{{ getDistance(latitude, longitude, info.lat, info.lon) }}km
        </view>

        <view class="remark" v-if="showRemark" @tap="() => popShow = true">
            {{ remarkTitle }}
        </view>


        <PopView :popShow="popShow" :title="remarkTitle" @popClose="popClose" @popOpen="popOpen">
            <view class="remarkbox" slot="content">
                <textarea :maxlength="-1"  :value="remark" class="my-textarea" :placeholder="'请输入'" @input="change"></textarea>
            </view>
        </PopView>
    </view>
</template>
 
<script>
export default {
    props: {
        type: {
            type: String,
            default: '1'
        },
        showAddress: {
            type: Boolean,
            default: true
        },
        showRemark: {
            type: Boolean,
            default: true
        },
        remark: {
            type: String,
            default: ''
        },
        showMove: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: null
        }
    },
    computed: {
        remarkTitle() {
            if (this.info && this.info.type == 2) {
                return '待处理问题'
            } else {
                return '备注'
            }
        }
    },
    data() {
        return {
            popShow: false,
            typeMap: {
                1: {
                    label: "网点",
                    color: '#097EFF',
                },
                3: {
                    label: "安防",
                    color: '#46D021'
                },
                2: {
                    label: "基站",
                    color: '#FFAE01',
                },
            },
            latitude: wx.getStorageSync("latitude"),
            longitude: wx.getStorageSync("longitude"),
        }
    },
    methods: {
        toDeatil() {
            wx.navigateTo({
                url: '/pages/information/information?id=' + this.info.id
            });
        },
        change(val) {
            this.$emit('changeRemark', val.detail.value)
        },
        popClose() {
            this.popShow = false;
        },
        popOpen() {
            this.popShow = true;
        },

        // 计算两个经纬度
        getDistance(lat1, lon1, lat2, lon2) {
            if (lat1 && lon1 && lat2 && lon2) {
                // 将角度转换为弧度
                function toRadians(degrees) {
                    return (degrees * Math.PI) / 180;
                }

                // 使用 Haversine 公式计算距离
                const R = 6371; // 地球半径，单位为千米
                const dLat = toRadians(lat2 - lat1);
                const dLon = toRadians(lon2 - lon1);

                const a =
                    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                    Math.cos(toRadians(lat1)) *
                    Math.cos(toRadians(lat2)) *
                    Math.sin(dLon / 2) *
                    Math.sin(dLon / 2);

                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                const distance = R * c; // 距离，单位为千米
                return distance.toFixed(2);
            } else {
                return ''
            }

        },
    }

}
</script>

<style lang="scss" scoped>
.flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.Positon {
    width: 750rpx;
    background: #FFFFFF;
    padding: 32rpx 30rpx;
    font-size: 26rpx;
    line-height: 38rpx;
    border-bottom: 2rpx solid #F2F2FC;
    border-top: 2rpx solid #F2F2FC;
    position: relative;

    .remark {
        padding: 40rpx;
        padding-top: 0;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .move {
        font-size: 36rpx;
        font-weight: bold;
        color: #282828;
        line-height: 52rpx;
        position: relative;
        padding-bottom: 20rpx;

        .txt {
            position: relative;
            z-index: 2;

        }

        >.movebg {
            width: 164rpx;
            height: 30rpx;
            background: linear-gradient(270deg, rgba(228, 238, 249, 0) 0%, rgba(231, 239, 255, 0.7) 100%);
            border-radius: 4rpx;
            position: absolute;
            bottom: 15rpx;
            left: -32rpx;
            z-index: 1;
        }
    }

    .name-box {
        font-size: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
            width: 458rpx;
            height: 48rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #282828;
            line-height: 48rpx;
            display: flex;
            display: flex;
            align-items: center;

            .img-right {
                width: 16rpx;
                height: 24rpx;
                margin-left: 20rpx;
            }
        }

        .btn {
            width: 118rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            background: #097EFF;
            border-radius: 10rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #FFFFFF;
        }


    }

    .label {
        font-size: 26rpx;
        font-weight: 400;
        color: #989898;
        line-height: 38rpx;
        margin-top: 16rpx;

        .b {
            font-weight: bold;
            color: #282828;
        }

    }

    .m3 {
        color: #097EFF;
        margin-top: 16rpx;
    }
}

.bg {
    width: 458rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: linear-gradient(270deg, rgba(228, 238, 249, 0) 0%, #EFF3FC 100%);
    border-radius: 4rpx;
    margin-top: 16rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #097EFF;
    padding-left: 16rpx;

}

.remarkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx;
    padding-top: 0;
}

.my-textarea {
    width: 100%;
    height: 224rpx;
    background: #f7f7fc;
    border-radius: 8rpx;
    border: 2rpx solid #e4e4e4;
    padding: 20rpx;
}
</style>
 

 